<!--bs-table.com/Content/templates/example.html-->
<div class="container">
    <link type="text/css" ng-href="{{page.Css}}" rel="stylesheet" />
    <div ng-show="progress.Ready" class="inner-container sample">
        <h2 id="working-sample">Very Good User Table</h2>

        <table class="table table-hover table-bordered" bs-table>
            <thead>
                <tr>
                    <th ng-click="predicate='UserID'; reverse=!reverse">User ID</th>
                    <th ng-click="predicate='NickName'; reverse=!reverse">Nick Name</th>
                    <th ng-click="predicate='Gender'; reverse=!reverse">Gender</th>
                    <th ng-click="predicate='Country'; reverse=!reverse">Country</th>
                    <th ng-click="predicate='Province'; reverse=!reverse">Province</th>
                    <th ng-click="predicate='City'; reverse=!reverse">City</th>
                    <th ng-click="predicate='JoinTime'; reverse=!reverse">Join Time</th>
                    <th >Actions</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="contact in contactList | orderBy:predicate:reverse">
                    <td>{{contact.uid}}</td>
                    <td>{{contact.nickname}}</td>
                    <td>{{contact.gender|gender}}</td>
                    <td>{{contact.country}}</td>
                    <td>{{contact.province}}</td>
                    <td>{{contact.city}}</td>
                    <td>{{contact.jointime|timechange}}</td>
                    <td>
                    	<button type="button" class="btn btn-info btn-sm" ng-click="Show(contact)">Show Detail</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <script type="text/ng-template" id="userWindow.html">
        <div class="modal-header">
            <h3 class="modal-title" id="modal-title">{{$ctrl.title}}</h3>
        </div>
        <div class="modal-body" id="modal-body">
            User ID:<input type="text" id="novel-info" class="form-control" ng-readonly="{{$ctrl.readonly}}" ng-model="$ctrl.contact.uid">
            Nick Name:<input type="text" id="novel-info" class="form-control" ng-readonly="{{$ctrl.readonly}}" ng-model="$ctrl.contact.nickname">
            Gender:<input type="text" id="novel-info" class="form-control" ng-readonly="{{$ctrl.readonly}}" ng-value="$ctrl.contact.gender|gender">
            Country:<input type="text" id="novel-info" class="form-control" ng-readonly="{{$ctrl.readonly}}" ng-model="$ctrl.contact.country">
            Province:<input type="text" id="novel-info" class="form-control" ng-readonly="{{$ctrl.readonly}}" ng-model="$ctrl.contact.province">
            Avatar url:<textarea id="novel-info" cols ="50" rows = "5" class="form-control" ng-model="$ctrl.contact.avatarurl" ng-readonly="{{$ctrl.readonly}}" style="resize: none;"></textarea>
            Join Time:<input type="text" id="novel-info" class="form-control" ng-readonly="{{$ctrl.readonly}}" ng-value="$ctrl.contact.jointime|timechange">
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" type="button" ng-click="$ctrl.ok()">OK</button>
           
        </div>
    </script>
    <div ng-hide="progress.Ready" class="inner-container preloader">
        <p>Please wait. User table is loading...</p>
        <div class="progress progress-striped active">
            <div class="progress-bar" style="width: 100%"></div>
        </div>
    </div>

    <div class="form-group">
            <label class="control-label">Select theme:</label>
            <select class="form-control" style="width: 15%;display: inline-block;" ng-model="page.Css">
                <option ng-repeat="theme in page.Themes" ng-selected="theme.cssMin == page.Css" value="{{theme.cssMin}}">{{theme.name}}</option>
            </select>
    </div>
</div>
